<template>
    <a-modal v-model="visible" title="新增" @ok="handleOk">
        <a-form style="max-height: 500px; overflow-y: auto;">
            <a-form-item
                    label="账号"
                    :label-col="formItemLayout.labelCol"
                    :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.welfareGroupAccount"/>
            </a-form-item>
            <a-form-item
                label="类别"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
<!--                <a-input placeholder="" v-model="formData.welfareGroupType"/>-->
                <a-select v-model="formData.welfareGroupType">
                    <a-select-option v-for="item in typeDict" :key="item.id" :value="item.value">{{ item.value }}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item
                label="福利群名称"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.welfareGroupName"/>
            </a-form-item>
            <a-form-item
                label="团队编号"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                v-show="false"
            >
                <a-input placeholder="" v-model="formData.teamNo"/>
            </a-form-item>
            <a-form-item
                label="所属团队"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.teamName"/>
            </a-form-item>
            <a-form-item
                label="群管"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
<!--                <a-input placeholder="" v-model="formData.manageNo"/>-->
                <a-auto-complete
                        v-model="formData.manageNo"
                        style="width: 200px"
                        @search="handleUserSearch"
                        @select="handleUserSelect"
                >
                    <template slot="dataSource">
                        <a-select-option v-for="item in usersDataSource" :key="item.key" :value="item.key">{{item.label}}</a-select-option>
                    </template>
                </a-auto-complete>
            </a-form-item>
            <a-form-item
                label="群管姓名"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                v-show="false"
            >
                <a-input placeholder="" v-model="formData.manageName"/>
            </a-form-item>
            <a-form-item
                    label="开始日期"
                    :label-col="formItemLayout.labelCol"
                    :wrapper-col="formItemLayout.wrapperCol"
            >
                <!--                <a-input placeholder="" v-model="formData.joinDate"/>-->
                <a-date-picker  v-model="formData.startTime" :format="dateFormat" :valueFormat="dateFormat"/>
            </a-form-item>
            <a-form-item
                    label="结束日期"
                    :label-col="formItemLayout.labelCol"
                    :wrapper-col="formItemLayout.wrapperCol"
            >
                <!--                <a-input placeholder="" v-model="formData.joinDate"/>-->
                <a-date-picker  v-model="formData.endTime" :format="dateFormat" :valueFormat="dateFormat"/>
            </a-form-item>
            <a-form-item
                label="是否参与考核"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
<!--                <a-input placeholder="" v-model="formData.isAssessment"/>-->
                <a-select v-model="formData.isAssessment">
                    <a-select-option value="是">是</a-select-option>
                    <a-select-option value="否">否</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item
                label="备注"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.remark"/>
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script>
import API from "../api/api_welfare_group"
import UAPI from "../../personal/api/api_personal"
export default {
    data() {
        return {
            formLayout: 'horizontal',
            visible: false,
            mode:'',
            formData: {},
            dateFormat:'YYYY-MM-DD',
            usersDataSource:[],
            typeDict: []
        };
    },
    computed: {
        formItemLayout() {
            const { formLayout } = this;
            return formLayout === 'horizontal'
                ? {
                    labelCol: { span: 8 },
                    wrapperCol: { span: 12 },
                }
                : {};
        },
        buttonItemLayout() {
            const { formLayout } = this;
            return formLayout === 'horizontal'
                ? {
                    wrapperCol: { span: 8, offset: 12 },
                }
                : {};
        },
    },
    methods: {
        initUsers(){
            UAPI.getUsersDict().then(res => {
                if (res.code === 0){
                    this.users = res.list;
                    this.usersDataSource = res.list;
                }else {
                    console.log('查询职务列表异常',e);
                    this.$message.error('查询直接群管列表异常,请联系管理员');
                }
            }).catch(e => {
                console.log('查询职务列表异常',e);
                this.$message.error('查询直接群管列表异常,请联系管理员');
            })
        },
        add() {
            this.initUsers();
            this.mode = 'add';
            this.formData = {};
            this.visible = true;
        },
        update(row){
            this.initUsers();
            this.mode = 'edit';
            this.formData = row;
            this.visible = true;
        },
        handleOk(e) {
            let that = this;
            let func = that.mode === 'add'? API.add: API.update;
            func(that.formData).then(res =>{
                if (res.code === 0){
                    that.$message.success('操作成功')
                    that.$emit('ok')
                }else {
                    that.$message.error('操作失败,请联系管理员')
                }
            }).catch(e =>{
                that.$message.error('操作失败,请联系管理员')
            })

            that.visible = false;
        },

        handleUserSearch(text){
            this.usersDataSource = text? this.users.filter(item => item.label.indexOf(text) > -1): this.users
        },
        handleUserSelect(value){
            let tmp = this.users.filter(item => item.key === value);
            if (tmp.length > 0){
                this.formData.manageName = tmp[0].value;
            }
        }
    },
    created() {
        // this.initPosition();
        // this.initUsers();
    }
};
</script>
